<template>
  <view class="page-wrap">
    <view class="welcome-wrapper">
      <view class="title">手机号验证</view>
      <view class="sign-form">
        <view class="input-box">
          <input
            v-model="phone"
            placeholder="输入手机号"
            placeholder-class="placeholder"
            class="input"
            type="number"
          >
        </view>
        <view class="input-box">
          <input
            v-model="code"
            class="input"
            placeholder="输入验证码"
            placeholder-class="placeholder"
            type="text"
          >
          <button
            :disabled="disabledGetVerificationCode"
            class="input-button-mini"
            @click="getVerificationCode"
          >{{ showTimmer ? second :text }}</button>
        </view>
      </view>
      <view class="btn-wxphone bgFCAF4F" :disabled="loading" @click="goVerfify">
        立即验证
      </view>
    </view>
  </view>
</template>
<script>
import { checkPhone } from "@/utils/validate"
import { sendCodeReq, verifyByCodeGZHReq, checkHaveBind } from '@/services/register'
export default {
  name: '',
  props: {},
  data(){
    return {
      login_code: '',
      sites: [],
      bindedSite: {},
      phone: "",
      code: "",
      currentSite: null,
      showWXVisible: false,
      showPhoneVisible: false,
      showTimmer: false,
      second: 60,
      text: "获取验证码",
      loading: false,
      disabledGetVerificationCode: false,
      disabledSubmit: false,
      havebinded: false,
      sealString: '',
      unionId: '',
      openId: ''
    }
  },
  onLoad: function(options) {
    this.phone = options.phone
    this.unionId = options.unionId
    this.openId = options.openId
  },
  mounted(){},
  methods: {
    checkHaveBind(){
      checkHaveBind({ phone: this.phone, unionId: this.unionId }).then(res => {
        if(res === true){
          uni.redirectTo({
            url: '/authorize/join?phone=' + res.phoneNumber + '&unionId=' + this.unionId + '&openId=' + this.openId
          })
        }else{
          uni.showModal({
            title: '提示',
            content: res,
            success: (res) => {}
          })
        }
      }).catch(err => {
        // 弹框提示
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 2000
        })
      })
    },
    sendCode(){
      sendCodeReq(this.phone).then((res) => {
        if (res.code === 200) {
          uni.showToast({
            title: '验证码发送成功',
            icon: 'none',
            duration: 2000
          })
          this.showTimmer = true
          this.disabledGetVerificationCode = true
          const timer = setInterval(() => {
            this.second = this.second - 1
            if (this.second === 0) {
              this.disabledGetVerificationCode = false
              this.showTimmer = false
              this.second = 60
              this.text = "重新获取"
              clearInterval(timer)
            }
          }, 1000)
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000
          })
          setTimeout(() => {
            this.disabledGetVerificationCode = false
          }, 2000)
        }
      }).catch((err) => {
        uni.showToast({
          title: err.message,
          icon: "none",
          duration: 2000
        })
        setTimeout(() => {
          this.disabledGetVerificationCode = false
        }, 2000)
      })
    },
    goVerfify(){
      this.loading = true
      verifyByCodeGZHReq({
        phone: this.phone,
        code: this.code
      }).then(res => {
        const timer = setTimeout(() => {
          this.loading = false
          clearTimeout(timer)
        }, 2000)
        if(res === true){
          this.checkHaveBind()
        }else{
          uni.showToast({
            title: res,
            icon: 'none',
            duration: 2000
          })
        }
      }).catch(err => {
        const timer = setTimeout(() => {
          this.loading = false
          clearTimeout(timer)
        }, 2000)
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 2000
        })
      })
    },
    getVerificationCode() {
      // 手机号格式校验
      if (checkPhone(this.phone)) {
        this.sendCode()
      } else {
        uni.showToast({
          title: "手机号格式错误",
          icon: "none",
          duration: 2000
        })
      }
    },
    goBack(){
      uni.redirectTo({
        url: '/pages/index/index'
      })
    },
    close(done){
      // TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
      // ...
      done()
    },
    confirm(done, value){
      // 输入框的值
      done()
    }
  }
}
</script>
